<template>
  <div>
    <div class="title mb-10">
      <van-icon name="notes-o" color="#ec2c2c" style="margin-right: 5px" />开具发票
    </div>
    <div>
      <van-form>
        <van-cell-group>
          <van-field v-model="formData.orderNo" label="订单号:" placeholder="蛋糕标签纸单号/三方平台单号" />
          <van-field v-model="formData.invoiceTitle" maxlength="64" label="抬头:" placeholder="请输入抬头信息" />
          <van-field v-model="formData.invoiceNo" maxlength="32" label="税号:" placeholder="请输入税号信息" />
          <van-field v-model="formData.phone" maxlength="11" label="手机号:" placeholder="请输入手机号" />
          <van-field v-model="formData.email" maxlength="48" label="电子邮箱:" placeholder="请输入邮箱" />

          <van-cell title="如您有多个订单同时登记，是否合并金额开具发票">
            <van-switch v-model="checked" active-color="#ec2c2c" inactive-color="#dcdee0" />
          </van-cell>
        </van-cell-group>
        <van-button type="primary" native-type="submit" block color="#ec2c2c" @click="handAddStep()">提交</van-button>
      </van-form>
    </div>

    <van-dialog v-model="checkOrderState.show" title="" :show-cancel-button="true"
      :show-confirm-button="checkOrderState.showConfirmBtn" confirm-button-text="查询订单" cancel-button-text="返回" @confirm="goOrder">
      <div class="pd-20 ta-c">
        <p>{{ checkOrderState.message }}</p>
      </div>
    </van-dialog>

    <van-dialog v-model="submitShow" title="" confirm-button-text="我知道了">
      <div class="pd-15 ta-c">
        <van-icon name="checked" color="#e33932" class="fz-32" />
        <div class="fw-bold mb-10 fz-16">提交成功</div>
        <p class="fz-14 mb-10">发票将发送至您的邮箱，请耐心等待！</p>
        <p class="c-999 fz-14">如有疑问，请联系客服</p>
      </div>
    </van-dialog>

  </div>
</template>

<script>
import { Toast } from "vant";
import { saveInvoice, validChannel } from "@/projects/invoice/api/home/index";
import { getLocations, setLocations } from '@/projects/invoice/utils/storage'
import { goOrder } from '@/utils/url'
export default {
  data() {
    return {
      submitShow: false,
      formData: {
        orderNo: "", // 订单编号
        invoiceTitle: "", //抬头
        invoiceNo: "", //发票税号
        phone: "", //手机
        email: "", //邮箱
        mergeFlag: 0, //是否合并
      },
      checkOrderState: {
        show: false,
        showConfirmBtn: false,
        message: '',
      },
      checked: false
    };
  },
  watch: {

  },
  created() {
    this.setDefaultForm()
    this.cacheForm(true)
  },
  destroyed() {
    this.cacheForm(false)
  },
  methods: {
    goOrder() {
      goOrder()
    },
    async handAddStep() {
      if (!this.formData.orderNo) {
        Toast.fail("请输入订单编号");
        return;
      } else if (!this.formData.invoiceTitle) {
        Toast.fail("请输入抬头");
        return;
      } else if (!this.formData.invoiceNo) {
        Toast.fail("请输入税号");
        return;
      } else if (!this.formData.phone) {
        Toast.fail("请输入手机号");
        return;
      } else if (!this.formData.email) {
        Toast.fail("请输入电子邮箱");
        return;
      }
      if (this.checked) {
        this.formData.mergeFlag = 1;
      } else {
        this.formData.mergeFlag = 0;
      }
      let reg = /^1[1-9][0-9]{9}$/;
      if (!reg.test(this.formData.phone)) {  // 再次验证号码状态是否正确
        Toast.fail("请输入正确的手机号格式");
        return;
      }
      var reg01 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //
      if (!reg01.test(this.formData.email)) {  // 再次验证号码状态是否正确
        Toast.fail("请输入正确的电子邮箱");
        return;
      }
      // 校验
      // const validChannelRes = await validChannel({ platformOrderId: this.formData.orderNo })
      // if (validChannelRes.code !== 200) {
      //   this.checkOrderState.show = true
      //   this.checkOrderState.message = `订单号：${this.formData.orderNo}，${validChannelRes.msg}`
      //   this.checkOrderState.showConfirmBtn = validChannelRes.msg && validChannelRes.msg.includes('订单不存在')
      //   this.formData.orderNo = ''
      //   return
      // }
      saveInvoice(this.formData).then(res => {
        if (res.code == 200) {
          this.formData.orderNo = '';
          this.submitShow = true;
        } else {
          Toast.fail(res.msg);
        }

      })
    },
    setDefaultForm() {
      const formData = getLocations('invoice_formData') || {}
      this.formData = {
        ...this.formData,
        ...formData
      }
      const { xmbzno } = this.$route.query || {}
      if (xmbzno) {
        this.formData.orderNo = xmbzno
      }
    },
    cacheForm (state) {
      if (state) {
        this.cacheFormTimer = setInterval(() => {
          setLocations('invoice_formData', this.formData)
        }, 1000)
      } else {
        this.cacheFormTimer && clearInterval(this.cacheFormTimer)
        this.cacheFormTimer = null
      }
    }
  },
};
</script>

<style lang='scss' scoped>
::v-deep .van-field__label {
  color: #323233;
}

::v-deep input::placeholder {
  font-size: 12px;
  color: #666666;
}

.van-switch--on {
  ::v-deep .van-switch__node {
    height: 100%;
    width: 50%;
    transform: translateX(2em);
  }
}

::v-deep .van-switch__node {
  width: 50%;
  height: 100%;
}

::v-deep .van-overlay {
  border-radius: 15px;
}

::v-deep .van-checkbox {
  margin: 10px;
}

.channelTitle {
  text-indent: 10px;
  margin: 10px 0;
}

.showerror {
  display: flex;
  flex-direction: column;
  text-align: right;
  width: 70%;

  .address {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .titleText {
    color: #ec2c2c;
    font-size: 12px;
  }
}

.goodsTime {
  display: flex;
  flex-direction: column;
  text-align: right;

  p {
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.time-title {
  margin-top: 10px;
  color: #666;
  font-size: 12px;
  line-height: 15px;
}

.time-endTime {
  margin-top: 20px;
  color: #666;
  font-size: 16px;
  line-height: 20px;
}

.MeituanShow {
  padding: 20px;
}

.van-overlay {
  height: 100%;
}

.wrapper {
  width: 330px;
  height: 190px;
  background: rgba(255, 255, 255, 1);
  border-radius: 14px;
  position: absolute;
  padding: 25px 12px 15px;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  .wrapper-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .wrapper-left {
      margin-right: 8px;

      img {
        width: 27px;
        height: 27px;
      }
    }

    .wrapper-right {
      font-size: 18px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;

      h3 {
        margin: 0;
        font-size: 16px;
      }

      p {
        margin: 5px;
        font-size: 12px;
      }
    }
  }

  .wrapper-bottom {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    padding: 0 40px;

    .watchorder {
      color: #007aff;
    }
  }
}
</style>